<template>
    <div class="loginModel">
        <!-- 遮罩层mask -->
        <div class="mask" @click="close"></div>

        <div class="loginBox">
            <div class="close" @click="close">X</div>
            <!-- 登录选项部分 -->
            <div class="title">
                <ul>
                    <li :class="isShowChange ? 'active' : ''" @click="isShowChange = true">手机号码登录</li>
                    <li style="margin: 0 10px;">|</li>
                    <li :class="!isShowChange ? 'active' : ''" @click="isShowChange = false">微信扫码登录</li>
                </ul>
            </div>

            <div class="body">
                <div class="left" v-show="isShowChange">
                    <div class="phone">
                        <input type="text" placeholder="请输入手机号码" v-model="telNum">
                    </div>

                    <!-- 滑动验证 -->

                    <div class="mi-captchas">

                        <!-- 基础效果 -->
                        <mi-captcha ref="captcha" @success="onSuccess"/>
                        <!-- 手动触发重置 -->
                        <!-- <a @click="reset">重置</a> -->

                    </div>

                    <!-- 验证码 -->
                    <div class="code">
                        <input type="text" placeholder="请输入验证码" v-model="userVerifyCode">
                        <button>
                            <span @click="getSMSCode" v-show="!isShowSecond">获取</span>
                            <span v-show="isShowSecond">{{ count }}</span>
                        </button>
                    </div>

                    <!-- 登录按钮 -->

                    <div class="login">
                        <button @click="subLogin">登录</button>
                    </div>
                </div>

                <div class="right" v-show="!isShowChange">
                    <img src="../assets/img/listimg.jpg" alt="">
                    
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>

import { ref, reactive } from 'vue';

import { useStore } from 'vuex';

import { SendCodeAPI, PhoneLoginAPI } from '@/api/manager.js';

const store = useStore();

// 声明响应式变量
let isShowChange = ref(true);

// 声明响应式变量
let telNum = ref(null);

let telFlag = false;
let captchaFlag = false;
let codeFlag = false; // 验证码是否正确验证通过的flag变量，只有在验证码发送成功后才有

let isShowSecond = ref(false);

let count = ref(60);

let userVerifyCode = ref(null);

import { validatePhoneNumber } from '@/utils';

// 关闭登录窗口
let close = () => {
    // alert('close')
    store.commit('setShowLogin', false);
}

let getSMSCode =  async () => {
    // 1. 先验证手机号码格式
    let res = validatePhoneNumber(telNum.value)

    if (!res) {
        alert('请输入正确的手机号码!');
        return false;
    } else {
        telFlag = true;
    }

    if (!captchaFlag) {
        alert('请先通过滑动验证!');
        return;
    }



    // 2. 发送请求获取验证码

    if (telFlag && captchaFlag) {
        

        let res =  await SendCodeAPI({
            phone: telNum.value
        })

        // console.log(res)

        if (res) {
            // 显示倒计时
            isShowSecond.value = true;
            showSecondsHandle();

        }
      
    }

}

// 倒计时函数
const showSecondsHandle = () => {
    let timer = setInterval(() => {
        count.value--;
        if (count.value === 0) {
            clearInterval(timer);
            isShowSecond.value = false;
            count.value = 60;
        }
    }, 1000);
}

// 验证成功后的回调函数
const onSuccess = () => {
    // 修改标志位状态
    captchaFlag = true;
}


const captcha = ref(null)

    const params = reactive({
        verify: { key: null }
    })

    const initAfter = (res) => {
        if (res?.ret?.code === 200) {
            
            localStorage.setItem('mi-captcha-key', res?.data?.key)
            params.verify.key = res?.data?.key
        }
    }

    const reset = () => {
        console.log('reinitialize')
        captcha.value?.reset(false)
    }

    // 用户登录
    const subLogin = async () => {
        // if (!userVerifyCode.value) {
        //     alert('请输入验证码!');
        //     return;
        // } else {
        //     codeFlag = true;
        // }
        telFlag = true;
        captchaFlag = true;
        codeFlag = true;
        reset();
        if (telFlag && captchaFlag && codeFlag) {
            // 向后台发送验证码和手机号
            let res = await PhoneLoginAPI({
                phone: telNum.value,
                verifyCode: userVerifyCode.value
            })

         
                // 将用户信息[x-auth-token]存储到本地
                localStorage.setItem('x-auth-token', res['x-auth-token']);
                // 修改状态管理中的登录状态
                store.commit('setIsLogined', true);
                // 登录成功则关闭登录框
                close();
       
         
        } else {
            return;
        }
    }

</script>

<style lang="less" scoped>
.loginModel {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .3);
    }

    .loginBox {
        width: 555px;
        height: 400px;
        background: url(../assets/img/login-box-bg.png) no-repeat 0 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .close {
            width: 30px;
            height: 30px;
            background: #CCC;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            color: #FFF;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 60px;
        }

        .title {
            display: flex;
            justify-content: center;
            margin-top: 20px;

            ul {
                width: 300px;
                display: flex;
                justify-content: center;

                li {
                    margin: 0 10px;
                    text-align: center;
                    font-size: 18px;
                    font-weight: 400;
                    cursor: pointer;
                    color: #CCC;
                }

                .active {
                    color: #000;
                }
            }
        }

        .body {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            button {
                cursor: pointer;
            }

            .left {
                display: flex;
                flex-direction: column;

                .phone,
                .code {
                    width: 330px;
                    height: 40px;
                    margin: 20px auto;

                    input {
                        border: 1px solid #CCC;
                        outline: none;
                        width: 100%;
                        height: 40px;
                        box-sizing: border-box;
                        padding-left: 10px;
                    }
                }

                .code {
                    display: flex;

                    button {
                        border: 1px solid blue;
                        /* Blue border */
                        width: 100px;
                        color: #FFF;
                        outline: none;
                        background-color: blue;
                        height: 40px;
                    }
                }

                .login {
                    width: 340px;
                    height: 40px;
                    margin: 20px auto;

                    button {
                        width: 100%;
                        height: 42px;
                        background-color: #00F;
                        color: #FFF;
                        outline: none;
                        border: none;
                        cursor: pointer;
                    }
                }
            }
        }
    }

}
</style>